<template>
  <div id="category">

    <!--<header class="mui-bar mui-bar-nav">-->
      <!--&lt;!&ndash;<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>&ndash;&gt;-->
      <!--&lt;!&ndash;<h1 class="mui-title">集商网</h1>&ndash;&gt;-->
    <!--</header>-->


    <div class="mui-content mui-row mui-fullscreen">

      <div class="mui-col-xs-3">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
          <a class="mui-control-item mui-active" href="#content0">企业</a>
          <a class="mui-control-item" href="#content1">产权</a>
          <a class="mui-control-item" href="#content2">财税</a>
          <a class="mui-control-item" href="#content3">电商</a>
          <a class="mui-control-item" href="#content4">开发</a>
        </div>
      </div>
      <div id="segmentedControlContents" class="mui-col-xs-9">
        <div id="content0" class="mui-control-content mui-active">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell_title">
              <span class="mui-table-view-cell_title_color">|</span>
              <span class="font">企业服务</span>
            </li>
            <div class="line"></div>

            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'gszc'}}">
                <span class="title">公司注册</span>
                <p class="instructions zh_1">专业快速代理公司注册</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>

            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'gqzr'}}">
                <span class="title">股权转让</span>
                <p class="instructions zh_1">合理出售您的股权,盈利亏损,自己决定</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>

            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'dljz'}}">
                <span class="title">代理记账</span>
                <p class="instructions zh_1">会计核算不健全集商解决您的记账问题</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'gsbg'}}">
                <span class="title">公司变更</span>
                <p class="instructions zh_1">专业快速办理公司变更</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'gszx'}}">
                <span class="title">公司注销</span>
                <p class="instructions zh_1">快速帮您办理公司注销</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
          </ul>
        </div>

        <div id="content1" class="mui-control-content">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell_title">
              <span class="mui-table-view-cell_title_color">|</span>
              <span class="font">知识产权</span>
            </li>
            <div class="line"></div>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'sbzc'}}">
                <span class="title">商标注册</span>
                <p class="instructions zh_1">保护知识产权,维护企业合法权益</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'zlbq'}}">
                <span class="title">专利版权</span>
                <p class="instructions zh_1">合理维护您的权益,保障您的公司形象</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'sbdb'}}">
                <span class="title">商标答辩/复议</span>
                <p class="instructions zh_1">专注商标异议答辩,为您提供高效商标</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
          </ul>
        </div>

        <div id="content2" class="mui-control-content">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell_title">
              <span class="mui-table-view-cell_title_color">|</span>
              <span class="font">财会税务</span>
            </li>
            <div class="line"></div>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'dljz'}}">
                <span class="title">小规模纳税人企业代理记账</span>
                <p class="instructions zh_1">会计核算不健全,集商解决您的记账问题</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'dljz'}}">
                <span class="title">一般纳税人企业代理记账</span>
                <p class="instructions zh_1">会计核算不健全,集商解决您的记账问题</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'cwbb'}}">
                <span class="title">财务报表审计</span>
                <p class="instructions zh_1">会计核算不健全,集商解决您的记账问题</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'cwbb'}}">
                <span class="title">年度企业所得税汇算清缴</span>
                <p class="instructions zh_1">集商为您解决财务上的遇到的问题</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'lgfp'}}">
                <span class="title">领购发票</span>
                <p class="instructions zh_1">发票难领?不存在的我们帮您解决</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
          </ul>
        </div>

        <div id="content3" class="mui-control-content">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell_title">
              <span class="mui-table-view-cell_title_color">|</span>
              <span class="font">电商服务</span>
            </li>
            <div class="line"></div>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'tmzr'}}">
                <span class="title">天猫转让</span>
                <p class="instructions zh_1">高新技术领域资质认可,难办就找集商</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'tmrz'}}">
                <span class="title">天猫入驻</span>
                <p class="instructions zh_1">助力企业资质安全,合规合法经营</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'dsdyy'}}">
                <span class="title">电商代运营</span>
                <p class="instructions zh_1">经营网络游戏类公司必备</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
          </ul>
        </div>

        <div id="content4" class="mui-control-content">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell_title">
              <span class="mui-table-view-cell_title_color">|</span>
              <span class="font">网络科技</span>
            </li>
            <div class="line"></div>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'rjkf'}}">
                <span class="title">软件开发</span>
                <p class="instructions zh_1">APP需求开发,定期完成开发项目</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'app'}}">
                <span class="title">APP小程序开发</span>
                <p class="instructions zh_1">公众号,小程序,急速开发,价格便宜</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
            <li class="mui-table-view-cell">
              <router-link :to="{name:'detail',params:{bs: 'wzjs'}}">
                <span class="title">网站建设</span>
                <p class="instructions zh_1">专业开发web端技术,成熟团队</p>
                <span class="mui-icon mui-icon-arrowright icon_position"></span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Servicelist",

    mounted() {
      $(() =>{
        mui.init({
          swipeBack: true //启用右滑关闭功能
        });

        // var title_list = ['企业','产权','财税','电商','开发'];
        // var content_list_1 = ['企业服务','公司注册','股权转让','代理记账','公司变更','公司注销'];
        // var content_list_2 = ['知识产权','商标注册','专利版权','商标答辩/复议'];
        // var content_list_3 = ['财会税务','小规模纳税人企业代理记账','一般纳税人企业代理记账','财务报表审计','年度企业所得税汇算清缴','领购发票'];
        // var content_list_4 = ['电商服务','天猫转让','天猫入驻','电商代运营'];
        // var content_list_5 = ['网络科技','软件开发','APP小程序开发','网站建设'];
        //
        // var content_instructions_list_1 = ['专业快速代理公司注册','合理出售您的股权,盈利亏损,自己决定','会计核算不健全集商解决您的记账问题','专业快速办理公司变更','快速帮您办理公司注销'];
        // var content_instructions_list_2 = ['保护知识产权,维护企业合法权益','合理维护您的权益,保障您的公司形象','专注商标异议答辩,为您提供高效商标'];
        // var content_instructions_list_3 = ['会计核算不健全,集商解决您的记账问题','会计核算不健全,集商解决您的记账问题','会计核算不健全,集商解决您的记账问题','集商为您解决财务上的遇到的问题','发票难领?不存在的我们帮您解决'];
        // var content_instructions_list_4 = ['高新技术领域资质认可,难办就找集商','助力企业资质安全,合规合法经营','经营网络游戏类公司必备'];
        // var content_instructions_list_5 = ['APP需求开发,定期完成开发项目','公众号,小程序,急速开发,价格便宜','专业开发web端技术,成熟团队'];

      });
    }
  }
</script>

<style lang="less">

  #category .mui-table-view{
    margin-top: 0.8rem;
  }

  #category .mui-segmented-control{
    top:0.8rem;
  }

  #category .mui-segmented-control .mui-control-item {
    line-height: 50px;
    width: 100%;
    border-right: solid 1px #c8c7cc;
  }
  #category .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
    background-color: #fff;
  }

  #category .mui-segmented-control .mui-control-item{
    width: 100%;
  }

  #category .mui-title{
    color: rgb(33,32,32);
    font-size:0.38rem;
  }

  #category .mui-segmented-control .mui-control-item{
    line-height: 1.37rem;
    font-size: 0.22rem
  }

  #category .mui-table-view{
    left:-1px;
    border-left:solid 1px #c8c7cc;
  }

  #category .mui-table-view-cell {
    position: relative;
    overflow: hidden;
    padding: 0.2rem 0.5rem;
    -webkit-touch-callout: none;
  }

  #category .mui-row.mui-fullscreen{
    background: #F3F6F6;
  }

  #category .mui-table-view-cell .title{
    line-height: 0.49rem;
    font-size: 0.3rem;
  }

  #category .mui-table-view-cell .instructions {
    font-size: 0.23rem;
    line-height: 0.49rem;
    width: 95%;
  }

  #category .mui-table-view-cell .zh_1{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  #category .mui-table-view-cell .icon_position {
    position: absolute;
    right: 0.15rem;
    top: 0.5rem;
    font-size: 0.4rem;
  }

  #category .mui-table-view-cell_title_color{
    color: #00BAF8;
    margin: 0 0.1rem 0 0.5rem;
    line-height: 1.37rem;
  }

  #category .font{
    color: black;
    font-size: 0.3rem;
  }

  #category .mui-table-view-cell_title:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
  }

  #category .line{
    height: 1px;
    background: #c8c7cc;
    margin-left: 15px;
  }

  #category .mui-icon-back:before, .mui-icon-left-nav:before {
    content: '';
  }

  #category .mui-bar-nav{
    background-color: white;
    color: #505050;
    height: 0.8rem;
    line-height: 0.8rem;
  }

  #category  .mui-bar-nav ~ .mui-content{
    padding-top: 0.8rem;
  }

  #category .mui-bar-nav {
    top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  #category .header_line{
    border: solid 1px #c8c7cc;
    height: 0.01rem;
  }

  #components .header{
    border-bottom: solid 1px #c8c7cc;
  }

  #components .mui-icon-arrowright:before {
    color: black;
  }

  .mui-table-view-cell > a:not(.mui-btn) {
    padding: 0.25rem 0.3rem;
  }


</style>
